<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏引擎测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: white;
            font-family: Arial, sans-serif;
        }
        
        #game-canvas {
            border: 2px solid #fff;
            display: block;
            margin: 20px auto;
            background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
        }
        
        .controls {
            text-align: center;
            margin: 20px;
        }
        
        button {
            padding: 10px 20px;
            margin: 5px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background: #45a049;
        }
        
        .info {
            text-align: center;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Vue Parkour Game - 引擎测试</h1>
    
    <div class="info">
        <p>使用 WASD 或方向键控制角色</p>
        <p>空格键跳跃，S键或下方向键滑铲</p>
    </div>
    
    <canvas id="game-canvas" width="800" height="400" tabindex="0"></canvas>
    
    <div class="controls">
        <button onclick="startGame()">开始游戏</button>
        <button onclick="pauseGame()">暂停/继续</button>
        <button onclick="resetGame()">重置游戏</button>
    </div>
    
    <div class="info">
        <p id="status">游戏状态: 未开始</p>
        <p id="fps">FPS: 0</p>
    </div>

    <script type="module">
        // 简化的游戏引擎测试
        class SimpleGameEngine {
            constructor(canvasId) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = this.canvas.getContext('2d');
                this.isRunning = false;
                this.isPaused = false;
                this.lastTime = 0;
                this.fps = 0;
                this.frameCount = 0;
                this.lastFpsTime = 0;
                
                // 玩家对象
                this.player = {
                    x: 100,
                    y: 300,
                    width: 50,
                    height: 50,
                    velocityY: 0,
                    isJumping: false,
                    isSliding: false,
                    slideTimer: 0,
                    color: '#4CAF50'
                };
                
                // 游戏设置
                this.gravity = 800;
                this.jumpForce = -400;
                this.groundY = 300;
                this.backgroundOffset = 0;
                this.backgroundSpeed = 50;
                
                // 输入状态
                this.keys = {};
                
                this.setupInput();
            }
            
            setupInput() {
                this.canvas.addEventListener('keydown', (e) => {
                    this.keys[e.code] = true;
                    this.handleInput(e.code, true);
                    e.preventDefault();
                });
                
                this.canvas.addEventListener('keyup', (e) => {
                    this.keys[e.code] = false;
                    e.preventDefault();
                });
                
                // 确保canvas可以接收焦点
                this.canvas.tabIndex = 0;
                this.canvas.focus();
            }
            
            handleInput(keyCode, pressed) {
                if (!pressed) return;
                
                switch(keyCode) {
                    case 'Space':
                    case 'ArrowUp':
                    case 'KeyW':
                        this.jump();
                        break;
                    case 'ArrowDown':
                    case 'KeyS':
                        this.slide();
                        break;
                }
            }
            
            jump() {
                if (!this.player.isJumping && !this.player.isSliding) {
                    this.player.velocityY = this.jumpForce;
                    this.player.isJumping = true;
                    this.player.color = '#2196F3'; // 蓝色
                }
            }
            
            slide() {
                if (!this.player.isSliding && !this.player.isJumping) {
                    this.player.isSliding = true;
                    this.player.slideTimer = 800; // 800ms
                    this.player.height = 25; // 降低高度
                    this.player.y = this.groundY - this.player.height;
                    this.player.color = '#FF9800'; // 橙色
                }
            }
            
            start() {
                if (this.isRunning) return;
                
                this.isRunning = true;
                this.isPaused = false;
                this.lastTime = performance.now();
                this.lastFpsTime = this.lastTime;
                this.gameLoop();
                
                document.getElementById('status').textContent = '游戏状态: 运行中';
            }
            
            pause() {
                this.isPaused = !this.isPaused;
                document.getElementById('status').textContent = 
                    `游戏状态: ${this.isPaused ? '暂停' : '运行中'}`;
            }
            
            stop() {
                this.isRunning = false;
                this.isPaused = false;
                document.getElementById('status').textContent = '游戏状态: 已停止';
            }
            
            reset() {
                this.stop();
                
                // 重置玩家状态
                this.player.x = 100;
                this.player.y = this.groundY - 50;
                this.player.width = 50;
                this.player.height = 50;
                this.player.velocityY = 0;
                this.player.isJumping = false;
                this.player.isSliding = false;
                this.player.slideTimer = 0;
                this.player.color = '#4CAF50';
                
                this.backgroundOffset = 0;
                
                // 清空画布
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.renderBackground();
                this.renderPlayer();
                
                document.getElementById('status').textContent = '游戏状态: 已重置';
            }
            
            gameLoop() {
                if (!this.isRunning) return;
                
                const currentTime = performance.now();
                const deltaTime = currentTime - this.lastTime;
                this.lastTime = currentTime;
                
                // 计算FPS
                this.frameCount++;
                if (currentTime - this.lastFpsTime >= 1000) {
                    this.fps = Math.round(this.frameCount * 1000 / (currentTime - this.lastFpsTime));
                    document.getElementById('fps').textContent = `FPS: ${this.fps}`;
                    this.frameCount = 0;
                    this.lastFpsTime = currentTime;
                }
                
                if (!this.isPaused) {
                    this.update(deltaTime);
                    this.render();
                }
                
                requestAnimationFrame(() => this.gameLoop());
            }
            
            update(deltaTime) {
                const deltaSeconds = deltaTime / 1000;
                
                // 更新背景滚动
                this.backgroundOffset += this.backgroundSpeed * deltaSeconds;
                
                // 更新玩家物理
                if (this.player.isJumping) {
                    this.player.velocityY += this.gravity * deltaSeconds;
                    this.player.y += this.player.velocityY * deltaSeconds;
                    
                    // 检查着陆
                    if (this.player.y >= this.groundY - this.player.height) {
                        this.player.y = this.groundY - this.player.height;
                        this.player.velocityY = 0;
                        this.player.isJumping = false;
                        this.player.color = '#4CAF50'; // 恢复绿色
                    }
                }
                
                // 更新滑铲状态
                if (this.player.isSliding) {
                    this.player.slideTimer -= deltaTime;
                    if (this.player.slideTimer <= 0) {
                        this.player.isSliding = false;
                        this.player.height = 50; // 恢复高度
                        this.player.y = this.groundY - this.player.height;
                        this.player.color = '#4CAF50'; // 恢复绿色
                    }
                }
            }
            
            render() {
                // 清空画布
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 渲染背景
                this.renderBackground();
                
                // 渲染玩家
                this.renderPlayer();
            }
            
            renderBackground() {
                // 渲染天空渐变
                const gradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
                gradient.addColorStop(0, '#87CEEB');
                gradient.addColorStop(1, '#98FB98');
                
                this.ctx.fillStyle = gradient;
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 渲染滚动云朵
                this.ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                const cloudY = 80;
                const cloudSpacing = 200;
                const numClouds = Math.ceil(this.canvas.width / cloudSpacing) + 2;
                
                for (let i = 0; i < numClouds; i++) {
                    const cloudX = (i * cloudSpacing - this.backgroundOffset) % (this.canvas.width + cloudSpacing);
                    this.renderCloud(cloudX, cloudY);
                }
                
                // 渲染地面
                this.ctx.fillStyle = '#8B4513';
                this.ctx.fillRect(0, this.groundY, this.canvas.width, this.canvas.height - this.groundY);
            }
            
            renderCloud(x, y) {
                this.ctx.beginPath();
                this.ctx.arc(x, y, 20, 0, Math.PI * 2);
                this.ctx.arc(x + 25, y, 25, 0, Math.PI * 2);
                this.ctx.arc(x + 50, y, 20, 0, Math.PI * 2);
                this.ctx.arc(x + 25, y - 15, 15, 0, Math.PI * 2);
                this.ctx.fill();
            }
            
            renderPlayer() {
                this.ctx.fillStyle = this.player.color;
                this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);
                
                // 绘制边框
                this.ctx.strokeStyle = '#000';
                this.ctx.lineWidth = 2;
                this.ctx.strokeRect(this.player.x, this.player.y, this.player.width, this.player.height);
            }
        }
        
        // 全局游戏实例
        let gameEngine = null;
        
        // 初始化游戏
        window.addEventListener('load', () => {
            gameEngine = new SimpleGameEngine('game-canvas');
            console.log('游戏引擎测试已初始化');
        });
        
        // 全局函数
        window.startGame = () => {
            if (gameEngine) {
                gameEngine.start();
            }
        };
        
        window.pauseGame = () => {
            if (gameEngine) {
                gameEngine.pause();
            }
        };
        
        window.resetGame = () => {
            if (gameEngine) {
                gameEngine.reset();
            }
        };
    </script>
</body>
</html>